<template>
    <div>
        <tabbar>
            <tabbar-item selected>
                <img slot="icon" src="../assets/img/carSearch/svg/cardNotCheck.svg">
                <img slot="icon-active" src="../assets/img/carSearch/svg/cardChecked.svg">
                <span slot="label">卡片管理</span>
            </tabbar-item>
            <tabbar-item>
                <img slot="icon" src="../assets/img/carSearch/svg/AccountNotCheck.svg">
                <img slot="icon-active" src="../assets/img/carSearch/svg/AccountChecked.svg">
                <span slot="label">我的客服</span>
            </tabbar-item>
            <tabbar-item  link="/component/demo">
                <img slot="icon" src="../assets/img/carSearch/svg/CustomNotCheck.svg">
                <img slot="icon-active" src="../assets/img/carSearch/svg/CustomCheck.svg">
                <span slot="label">Explore</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>

<script>
  import { Tabbar, TabbarItem } from 'vux'

  export default {
    components: {
      Tabbar,
      TabbarItem
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .weui-tabbar__icon{
    width: 30px !important;
    height: 30px !important;
  }
  .weui-tabbar__label{
    span{
      line-height: 0.3rem;
      font-size: 0.14rem;
    }
  }
  .weui-tabbar__item{
    padding: 10px 0 0;
  }
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
    span{
      color: #36c5d3;
    }
  }
</style>
